<template>
  <div class="form form-inline form-filter">
    <div class="form-group">
      <input type="text" class="form-control" v-model="filter.phone">
    </div>
    <button class="btn btn-primary btn-sm" @click="getList">搜索</button>
  </div>
  <table v-show="list && list.length > 0" class="table table-bordered table-hover">
    <caption>订阅用户名单(仅显示订阅有效期内的)</caption>
    <thead>
      <tr>
        <th>电话</th>
        <th class="col-xs-4">订阅内容</th>
        <th class="col-xs-1">订阅时长</th>
        <th class="col-xs-3">截止时间</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <template v-for="it in list">
        <tr>
          <td>{{it.phone}}</td>
          <td>{{it.title}}</td>
          <td>{{it.duration}}日</td>
          <td>{{it.endTime}}</td>
          <td class="text-right">
            <button class="btn btn-sm btn-danger" @click="unsubscribe(it.streamId)">删除订阅</button>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<style src="./subscribe-list.css" scoped></style>
<script src="./subscribe-list.js"></script>